<template>
  <div class="home">
    <!-- 组件缓存
        1:将组件对应的路由出口加keep-alive
        2:将需要缓存的组件加上name,在keep-alive  include="需要缓存组件的name"
        注意点:如果有多层嵌套组件要缓存,它父级的路由出口对应组件也要缓存
      缓存的组件滚动条位置并不能保留
      1:缓存组件内滚动条滚动过程中记录滚动位置
      2:当缓存组件显示时将滚动条滚动到相应位置 -->

    <van-nav-bar>
      <template #left>
        <img
          class="logo"
          src="https://xpzll.gitee.io/hmtt-76/img/logo.4653c8be.png"
          alt=""
        />
      </template>
      <template #right>
        <van-button
          style="height: 70%;"
          icon="search"
          round
          color="#5aabfb"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <div class="content">
      <van-tabs v-model="active" @change="tabChange">
        <van-tab v-for="(i, index) in list" :key="i.id" :title="i.name">
          <ArtList :index="index" :artId="i.id" :ref="'art_' + index"></ArtList>
        </van-tab>
      </van-tabs>
      <van-icon name="wap-nav" @click="showChannel" />
    </div>
    <!-- 频道管理 -->
    <ChannelEdit
      ref="channelEdit"
      :list="list"
      v-model="active"
      @setList="setList"
    ></ChannelEdit>
  </div>
</template>
<script>
import { userChannels, userChannelsPut } from '@/api/home'
import ArtList from './components/artList.vue'
import ChannelEdit from './components/channelEdit.vue'
export default {
  name: 'Home',
  components: {
    ArtList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      list: []
    }
  },
  created () {
    console.log('home created')
    this.getData()
  },
  activated () {
    console.log('home activated')
  },
  methods: {
    async getData () {
      //  如果token，只能调用接口获取
      //  如果没登陆
      //        本地有存储，取本地
      //        本地没存储，调接口获取
      // if (this.$store.state.tokenObj.token) {
      //   const res = await userChannels()
      //   this.list = res.data.data.channels
      // } else {
      //   if (localStorage.getItem('list')) {
      //     this.list = JSON.parse(localStorage.getItem('list'))
      //   } else {
      //     const res = await userChannels()
      //     this.list = res.data.data.channels
      //   }
      // }
      if (this.$store.state.tokenObj.token || !localStorage.getItem('list')) {
        const res = await userChannels()
        this.list = res.data.data.channels
      } else {
        this.list = JSON.parse(localStorage.getItem('list'))
      }
    },
    tabChange () {
      this.$nextTick(() => {
        // 让它的滚动条回到相应位置
        this.$refs['art_' + this.active][0].backScrollTop()
      })
    },
    showChannel () {
      this.$refs.channelEdit.isShow = true
    },
    async setList ({ method, value }) {
      if (method === 'push') {
        this.list.push(value)
      } else if (method === 'splice') {
        this.list.splice(value, 1)
      }
      // 修改list  没登录处理
      localStorage.setItem('list', JSON.stringify(this.list))
      // 调用接口传递给后端存储
      if (this.$store.state.tokenObj.token) {
        // list:[{id:0,name:'r推荐'}]===>[{id:0,seq:0}]
        // 返回值=数组.map(item=>{return {id,seq}})
        const channels = this.list.map((item, index) => {
          return {
            id: item.id,
            seq: index
          }
        })
        await userChannelsPut({
          channels: channels
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.logo {
  height: 80%;
}
.content {
  position: relative;
  .van-icon {
    position: absolute;
    top: 5px;
    right: 0;
    font-size: 30px;
  }
  .van-tabs {
    padding-right: 30px;
  }
}
</style>
